<template>
	<!-- 筛选项 -->
	<view class="filter-box">
		<view class="nav-box">
			<view class="iconfont icon-jiantou-zuo" @click="backPage"></view>
			<view class="tab-wrap">
				<view class="title" :class="{ active: tradeScene == 1 }" @click="changeTradeScene(1)">{{$t('order.Recharge')}}</view>
				<view class="title" :class="{ active: tradeScene == 2 }" @click="changeTradeScene(2)">{{$t('order.Exchange')}}</view>
			</view>
			<view class="iconfont icon-jiantou-zuo" style="opacity: 0;"></view>
		</view>
		<view class="two-tab-wrap" v-if="onlyHeader">
			<view class="tab left" :class="{ 'tab-active': tradeType == 0 }" @click="changeTradeType(0)">{{$t('orer.sell-order')}}
			</view>
			<view class="tab right" :class="{ 'tab-active': tradeType == 1 }" @click="changeTradeType(1)">{{$t('orer.purchase-order')}}
			</view>
		</view>
		<view class="sort-box" v-if="onlyHeader">
			<view @click="()=>{SelectPopupShow = true}" v-if="tradeScene == 1">
				<text>{{stateLabel}}</text>
				<text class="iconfont icon-xiala"></text>
			</view>
			<view @click="showCalendarHandel">
				<text>{{defaultTimeArr.length != 0 ? dataLabel : $t('order.Date')}}</text>
				<text class="iconfont icon-xiala"></text>
			</view>
		</view>
		<u-calendar :show="showCalendar" v-if="showCalendar" color="#61BDB2" mode="range" @confirm="confirmCalendar"
			@close="closeCalendar" monthNum="12" :allowSameDay="true" :startText="$t('order.start')" :endText="$t('order.end')" :minDate="minDate" :maxDate="todayTime"
			:confirmText="$t('index.Confirm')" :confirmDisabledText="$t('index.Confirm')" :title="$t('order.Date-Selection')" :defaultDate="defaultTimeArr.length !==0 ? defaultTimeArr : [todayTime]" @resetTime="resetTime" :resetText="$t('index.reset')">
		</u-calendar>

		<SelectPopup :show.sync="SelectPopupShow" :option="rechargeStatus" :title="$t('order.State')" :value="oderStatus"
			@finish="onChangeStatus" v-if="SelectPopupShow"></SelectPopup>
	</view>
</template>

<script>
	import SelectPopup from "@/components/SelectPopup.vue";
	import moment from "moment";
	export default {
		props: {
			tradeScene: {},
			tradeType: {},
			onlyHeader: {
				type: Boolean,
				default: () => true
			},
			oderStatus: {
				type: [String, Number],
				default: '-1'
			},
			// 默认时间
			defaultTimeArr: {
				default: () => []
			}
		},
		components: {
			SelectPopup
		},
		data() {
			return {
				showCalendar: false,
				minDate: '',
				SelectPopupShow: false,
				todayTime: []
			}
		},
		computed: {
			stateLabel() {
				if (this.oderStatus == -1) {
					return this.$t('order.State')
				} else {
					return this.rechargeStatus.filter(t => t.value == this.oderStatus)[0].label
				}
			},
			dataLabel() {
				const  beginCreateTime = moment(this.defaultTimeArr[0]).startOf('days').format("MM/DD")
				const  endCreateTime = moment(this.defaultTimeArr[this.defaultTimeArr.length - 1]).endOf('days').format("MM/DD")
				return beginCreateTime + '-' + endCreateTime
			},
			// 0 已冻结 1正在出售 2等待付款 10已付款 20已完成	 30投诉 40已取消
			rechargeStatus() {
				return [{
					label: this.$t('order.All'),
					value: -1
				}, {
					label: this.$t('order.Pending-payment'),
					value: 2
				},
				{
					label: this.$t('order.Already-paid'),
					value: 10
				}, {
					label: this.$t('order.Complete'),
					value: 20
				}, {
					label: this.$t('order.Complaint'),
					value: 30
				}, {
					label:  this.$t('order.Cancelled'),
					value: 40
				}
			]
			}
		},
		mounted() {
			//上3月的开始时间
			this.minDate = moment().subtract(10, 'months').startOf('days').format("YYYY-MM-DD HH:mm:ss")
			this.todayTime = moment().startOf('days').format("YYYY-MM-DD")
			console.log(this.todayTime);
		},
		methods: {
			backPage() {
				this.$emit('back')
				// uni.navigateBack()
			},
			changeTradeType(tab) {
				this.$emit('changeTradeType', tab)

			},
			changeTradeScene(tab) {
				this.$emit('changeTradeScene', tab)
			},
			confirmCalendar(timeArr) {
				console.log(timeArr);
				const timeObj = {
					beginCreateTime: moment(timeArr[0]).startOf('days').format("YYYY-MM-DD HH:mm:ss"),
					endCreateTime: moment(timeArr[timeArr.length - 1]).endOf('days').format("YYYY-MM-DD HH:mm:ss")
				}
				this.showCalendar = false
				this.$emit('changeData', timeObj, timeArr)
			},
			showCalendarHandel() {
				this.showCalendar = true

			},
			closeCalendar() {
				this.showCalendar = false
			},
			onChangeStatus(val) {
				this.$emit('onChangeStatus', this.tradeScene, val)
			},
			resetTime() {
				this.$emit('resetTime')
				this.showCalendar = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.filter-box {
		background: #fff;
	}

	.nav-box {
		height: 88rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;

		.icon-jiantou-zuo {
			font-size: 22px;
		}

		.tab-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.title {
			font-size: 32rpx;
			font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
			font-weight: 500;
			color: #878787;
			line-height: 48rpx;
			text-align: center;

			&.active {
				font-size: 32rpx;
				font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx;
				position: relative;

				&::before {
					position: absolute;
					content: "";
					left: 0;
					right: 0;
					margin: 0 auto;
					bottom: -12rpx;
					width: 60rpx;
					height: 8rpx;
					background: #61bdb2;
					border-radius: 8rpx;
				}
			}
		}

		.title:nth-child(1) {
			margin-right: 60rpx;
		}
	}

	.two-tab-wrap {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 96rpx;

		.tab {
			height: 56rpx;
			background: #f6f6f6;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #878787;
			line-height: 56rpx;
			padding: 0 24rpx;

			&.tab-active {
				height: 56rpx;
				background: #61bdb2;
				border-radius: 20rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
				font-weight: 500;
				color: #ffffff;
				line-height: 56rpx;
			}
		}
	}

	.sort-box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		height: 80rpx;

		.icon-xiala {
			color: #bfbfbf;
			font-size: 12px;
		}
	}
</style>
